<template>
  <div class="headerContainer">
    <div class="headerContent">
      <div class="left">
        <img src="@/assets/logo.png" alt="logo" class="logo" />
        <minMenu isHeader style="margin-left: 30px;" v-if="menusStructure.length" :structure="menusStructure" :messages="messages" inline />
        <div class="title" v-else>{{ title }}</div>
      </div>
      <div class="right">
        <div class="icon" >
          <StarOutlined  @click="router.push({ name: 'collect' })"/>
        </div>
        
        <div class="icon" >
          <a-badge :count="isTeacher()?state.teacherNotice['未读总数']:state.studentNotice['未读总数']">
            <BellOutlined @click="toNotice" />
          </a-badge>
        </div>

        <a-dropdown>
          <a-button size="small"  @click.prevent>{{ supportLangs[lang].name }}</a-button>
          <template #overlay>
            <a-menu style="width: 120px">
              <a-menu-item @click="changeLang(index)" v-for="(item, index) in supportLangs">
                {{ item.name }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent style="cursor: pointer">
            <div class="avatar-img"  v-if='state.userInfo.avatarUrl'>
              <img :src="state.userInfo.avatarUrl" >
            </div>
            <img v-else  class="avatar-img" src="@/assets/user.png" alt="">
            <!-- <div class="avatar-img" v-if='!state.userInfo.avatarUrl'>
              {{ state.userInfo.name.slice(-2) }}
            </div> -->
          </a>
          <template #overlay>
            <a-menu style="width: 120px">
              <a-menu-item v-if="!isTeacher()">
                <div @click="toModified">{{ t('menu','账号信息') }}</div>
              </a-menu-item>
              <a-menu-item>
                <div @click="handleOut({ name: '退出登录' })">{{ t('menu','退出登录') }}</div>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>

</template>
<script setup>
import {ref,onMounted} from 'vue';
import { StarOutlined, BellOutlined } from '@ant-design/icons-vue'
import { state,isTeacher,refreshStudentNotice,refreshTeacherNotice } from '@/stores/info.js'
import { useRoute, useRouter } from 'vue-router'
import { signOut } from '@/request/login.js'
import minMenu from '@/components/common/minMenu.vue'
import { changeLang, supportLangs, lang } from '@/i18n'
import { t } from '@/i18n'
import {getTeacherUnreadMessageNum,getStudentUnreadMessageNum} from '@/request/notice/message'
const route = useRoute()
const router = useRouter()

let toNotice=()=>{
  let href = router.resolve({
					name: 'notice',
				})
	window.open(href.href, '_blank')
}
// let unreadNumber=ref(0)
onMounted(async()=>{
  let res
	if(isTeacher()){
		res=await refreshTeacherNotice()
	}else{
		res=await refreshStudentNotice()
	}
  console.log('导航',res)
  console.log('导航isTeacher',isTeacher())
  console.log('导航teacherNotice',state.teacherNotice)
  console.log('导航studentNotice',state.studentNotice['未读总数'])
  if(!res) return
  // unreadNumber.value=res.data
})

const { title, messages } = defineProps({
  title: {
    type: String,
    default: '',
    // default: '未来教育平台',
  },
  menusStructure: {
    type: Array,
    default: [],
  },
  messages: {
    type: Object,
    default: {},
  }
})

const toModified = () => {
   router.push({ name: isTeacher() ? 'teacherPersonalInformation' : 'PersonalInformation' })
}
const handleOut = async (e) => {
  signOut()
  setTimeout(()=> {
    router.replace('/login')
    localStorage.removeItem('userInfo')
    state.userInfo = {}
  }, 100)
}
</script>

<style lang="scss" scoped>
.headerContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  position: relative;
  margin-bottom: 0px;
  &::before {
    width: 100%;
    content: '';
    z-index: 2;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 2px; /* 与 border-bottom 的宽度相同 */
    background: linear-gradient(to bottom, #D2CAE5, #ffffff);
  }
}
.headerContent {
  width: $viewMinWidth;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  margin-bottom: 2px;
  position: relative;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;

    .logo {
      height: 56px;
      margin-right: 12px;
      margin-top: 10px;
    }

    .title {
      font-size: 16px;
    }
  }

  .right {
    $userImgWidth: 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    .icon {
      font-size: 22px;
      cursor: pointer;
      
      cursor: pointer;
      span {
        font-size: inherit;
      }
    }

    .avatar-img {
      // display: block;
      /* display: flex; */
      /* align-items: center; */
      justify-content: center;
      background: #EEEEFF;
      // background-color: rgba(128, 94, 143, 0.2); 
      width: $userImgWidth;
      height: $userImgWidth;
      border-radius: 50%;
      cursor: pointer;
      -webkit-user-drag: none;
      overflow: hidden;
      img{
        height: 100%; 
        width:100%;
        object-fit: cover; 
      }
    }
  }
}
</style>
